<template>
	<view>
		<view class="diy-list">
			<view class="item" v-for="(item, index) in datalist" :key="index">
				<view class="time"><text class="name">下单时间：{{item.create_time}}</text><text class="state">{{item.status_text}}</text></view>
				<view class="cate">分类:{{item.cate_name}}</view>
				<view class="describe"><text class="name">珠宝描述：</text><text class="text">{{item.description}}</text></view>
				<view class="prod-img">
					<view v-for="(photo, idx) in item.photo_text" :key="idx"><image :src="photo" mode="aspectFit"></image></view>
				</view>
			</view>
			<mix-load-more :status="loadMoreStatus"></mix-load-more>
		</view>
		<view class="m-full-loading" v-if="bIsShowLoading">
			<view class="m-loading">
				<image src="../../../static/images/loading.gif" mode="widthFix"></image>
			</view>
		</view>
		<view class="no-text" v-if="showNodata">
			暂无定制记录
		</view>
	</view>
</template>

<script>
	import hl from '@/common/common_zb.js';
	export default {
		data() {
			return {
				datalist: [],
				page:1,
				totalPages:1,
				bIsShowLoading: false,
				showNodata:false,
				loadMoreStatus:1,
				pageType:'diy',
				url:''
			}
		},
		methods: {
			request(type){
				let that = this
				that.loadMoreStatus = 1
				if(that.page <= that.totalPages){
					hl.get(that.url, {page:that.page}, true, function(res){
						if (type == 'plus') {
							that.datalist = that.datalist.concat(res.data.data);
						} else {
							that.datalist = res.data.data;
							that.totalPages = res.data.total_pages;
							that.loadMoreStatus = res.data.data.length === 0?3:2
						}
					})
				}else{
					that.loadMoreStatus = 2
				}
				
			}
		},
		onLoad({pageType}) {
			this.pageType = pageType
			switch(pageType){
				case 'diy':
					this.url = 'member/getJewelDiyList'
					uni.setNavigationBarTitle({
						title:'定制记录'
					})
				break;
				case 'offline':
					this.url = 'Goods/offline_list'
					uni.setNavigationBarTitle({
						title:'线下交易记录'
					})
				break;
			}
			this.request();
		},
		onReachBottom() {
			this.page += 1;
		    this.request('plus');
		}
	};
</script>

<style>
	page{
		background: #f3f3f3;
	}
	.no-text{
		text-align: center;
		font-size: 36upx;
		padding: 50upx 0;
	}
	.diy-list .item{
		background: #ffffff;
		margin-bottom: 20upx;
	}
	.diy-list .item .time{
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 79upx;
		border-bottom: 1px solid #e5e5e5;
		padding: 0 30upx;
	}
	.item .time .name{
		color: #808080;
		font-size: 28upx;
	}
	.item .time .state{
		color: #d83030;
		font-size: 32upx;
	}
	.item .describe{
		display: flex;
		align-items: flex-start;
		padding: 15upx 30upx;
	}
	.item .describe text{
		display: block;
		color: #414141;
	}
	.item .describe .name{
		font-size: 32upx;
		width: 180upx;
	}
	.item .describe .text{
		font-size: 28upx;
		line-height: 42upx;
		width: 500upx;
	}
	.item .prod-img{
		padding: 0 30upx;
		display: flex;
		align-items: flex-start;
	}
	.item .prod-img view{
		width: 184upx;
		height: 184upx;
		background: #cccccc;
		margin: 0 20upx 20upx 0upx;
	}
	.item .prod-img image{
		width: 100%;
		height: 100%;
	}
	.m-full-loading{
		background: rgba(255,255,255,0);
	}
	.cate{
		font-size: 28upx;
		padding: 10upx 30upx;
		padding-bottom: 0;
	}
</style>
